<template>
  <v-app>
    <!-- App Bar -->
    <v-app-bar color="black" dense dark app>
      <!-- Title -->
      <v-toolbar-title class="font-family-verdana">
        了解更多
      </v-toolbar-title>
      
      <v-spacer></v-spacer>
      
      <!-- Navigation Buttons -->
      <v-btn depressed style="margin-right: 10px; font-family:'Courier New', Courier, monospace" @click="jumpToPreaserve">
        预约服务
        <v-icon>mdi-access-point</v-icon>
      </v-btn>
      <v-btn depressed style="margin-right: 10px; font-family:'Courier New', Courier, monospace" @click="jumpToMemoryShop">
        记录商城
        <v-icon>mdi-store</v-icon>
      </v-btn>
      <v-btn depressed style="margin-right: 10px; font-family:'Courier New', Courier, monospace"  @click="jumpToLivingDocument">
        生命档案
        <v-icon>mdi-file-document</v-icon>
      </v-btn>
      <v-btn depressed class="mr-2 nav-btn">
        个人中心
        <v-icon>mdi-home</v-icon>
      </v-btn>
      
      <!-- Login Menu -->
      <v-menu offset-y>
        <template v-slot:activator="{ on, attrs }">
          <v-btn color="primary" dark v-bind="attrs" v-on="on" class="ml-2">
            login/quit
          </v-btn>
        </template>
        <v-list>
          <v-list-item>
            <v-btn color="secondary" dark block>修改密码</v-btn>
          </v-list-item>
          <v-list-item>
            <v-btn color="warning" dark block @click="quitLogin">退出登录</v-btn>
          </v-list-item>
        </v-list>
      </v-menu>
    </v-app-bar>

    <!-- Main Content -->
    <v-main>
     
    </v-main>

    <!-- Footer -->
    <v-footer dark padless>
      <v-card flat tile class="indigo lighten-1 white--text text-center" width="100%">
        <v-card-text>
          <v-btn v-for="icon in icons" :key="icon" class="mx-4 white--text" icon>
            <v-icon size="24px">{{ icon }}</v-icon>
          </v-btn>
        </v-card-text>

        <v-card-text class="white--text pt-0">
          <v-container>
            <v-row>
              <v-col cols="12" md="4" class="text-left">
                关于我们：我们致力于给每个宠物温馨的归宿
              </v-col>
              <v-col cols="12" md="4">
                服务时间：周一到周五 9：00-21：00
              </v-col>
              <v-col cols="12" md="4" class="text-right">
                联系我们：服务热线 029-87659021
              </v-col>
            </v-row>
          </v-container>
        </v-card-text>

        <v-divider></v-divider>

        <v-card-text class="white--text">
          {{ new Date().getFullYear() }} — 宠物生命纪念馆 All Rights Reserved
        </v-card-text>
      </v-card>
    </v-footer>
     <!-- Loading Overlay -->
     <v-overlay :value="isLoading" color="black">
      <v-progress-circular indeterminate size="64" color="primary"></v-progress-circular>
    </v-overlay>
  </v-app>
</template>

<script>
export default {
  data: () => ({
    
    isLoading:false,
    loading:true,
  }),
  methods:{
    reserve() {
      this.loading = true;
      setTimeout(() => (this.loading = false), 2000);
    },
    jumpToPreaserve() {
      this.isLoading = true; 
      setTimeout(() => {
        this.$router.push('/preserve'); 
        this.isLoading = false; 
      }, 1000); 
    },
    jumpToMemoryShop(){
      this.isLoading=true;
      setTimeout(()=>{
        this.$router.push('/memory');
        this.isLoading =false;
      },1000);
    },
    jumpToLivingDocument(){
      this.isLoading=true;
      setTimeout(()=>{
        this.$router.push('/memory');
        this.isLoading =false;
      },1000);
    },
    quitLogin(){
      this.isLoading=true;
      setTimeout(()=>{
        this.$router.push('/login');
        this.isLoading =false;
      },1000);
    },
  }
}
</script>

<style>
.font-family-verdana {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.nav-btn {
  font-family: 'Courier New', Courier, monospace;
}
</style>